<template>
    <div>
        <ul class="top2" style="margin-top: 20px">
            <span>数量</span>
            <div class="numbox">
                <span @click="jian">-</span>
                <input type="text" readonly v-model="text" />
                <span @click="jia">+</span>
            </div>
        </ul>
        <button class="btn" @click="addCart">加入购物车</button>
    </div>
</template>


<script>
import {cartAdd} from '@/Api/cart'
export default {
    props: ['infoobj', 'skuobj'],
    data() {
        return {
            text: 1
        }
    },
    methods: {
        jian() {
            if (this.text <= 1) {
                this.text = 1
            } else {
                this.text--
            }
        },
        jia() {
            this.text++
        },
        async addCart() {
            if (this.$store.state.user.userInfo && this.$store.state.user.userInfo.token) {
                let {data:res} = await cartAdd(this.skuobj.skuId,this.text)
                console.log(res);
                if(res.msg =="操作成功"){
                    this.$store.commit("cart/addList", res.result)
                }else{
                    this.$message({text:'添加失败',type:'error'})
                }
            } else {
                if (!this.skuobj.skuId) {
                    this.$message({ text: '请选择台适的规格再加入', type: 'error' })
                    return false
                }
                if (this.skuobj.inventory < this.text) {
                    this.$message({ text: '库存不足', type: 'error' })
                    return false
                }
                var index = this.$store.state.cart.list.findIndex(item => item.skuId == this.skuobj.skuId)
                if (index == -1) {
                    // console.log(this.skuobj.skuId,);
                    var obj = {
                        picture: this.infoobj.mainPictures[0],   //图片
                        count: this.text,                        //数量
                        selected: true,                          //选中状态
                        name: this.infoobj.name,                 //名字
                        price: this.skuobj.oldPrice,             //原价
                        skuId: this.skuobj.skuId,                //选中规格的id
                        attrsText: this.skuobj.skuname,          //选中规格的名字
                        nowPrice: this.skuobj.price,             //现价
                        stock: this.skuobj.inventory,            //库存
                        isCollect: false                         //是否收藏
                    }

                    // var obj={...this.skuobj, count:this.text,selected: true, goodsname:this.infoobj.name,picture:this.infoobj.mainPictures[0]}
                    this.$store.commit("cart/addList", obj)
                } else {
                    this.$store.commit("cart/changeNum", { index, number: this.number })
                }
            }


        }
    }
}
</script>

<style lang="scss" scoped>
.top2 {
    width: 620px;
    height: 65px;
    // background-color: #27ba9b;
    background-color: white;
    // padding-left: 10px;
    // padding-top: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    color: #bbb;

    li {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        border: 1px solid #ccc;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .numbox {
        width: 140px;
        height: 30px;
        // border: 1px solid #e4e4e4;
        display: flex;
        margin-left: 20px;

        span {
            width: 29px !important;
            height: 29px;
            line-height: 28px;
            text-align: center;
            background: #f8f8f8;
            font-size: 16px;
            color: #666;
        }

        input {
            width: 60px;
            padding: 0 5px;
            text-align: center;
            color: #666;
            outline: 0;
        }
    }
}

.btn {
    width: 180px;
    height: 50px;
    border: 0;
    background-color: #27ba9b;
    color: white;
    border-radius: 5px;
    // margin-top: 20px;
}
</style>